<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>平台运营-创建分公司及覆盖区域</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
</head>

<body>
  <div id="app">
    <div class="vue-wrapper">
      <div class="search-wrapper">
        <Row :gutter="16">
          <i-col span="7">
            <div class="search-input common-input">
              <span class="prepend">公司名称</span>
              <div class="search-input-flex common-input-flex">
                <i-input v-model="search.orderNumber" />
              </div>
            </div>
          </i-col>
          <i-col span="7">
            <div class="search-select common-input">
              <span class="prepend">会员类型</span>
              <div class="common-input-flex">
                <i-select v-model="search.status">
                  <i-option v-for="item in search.billingStatus" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
              </div>
            </div>
          </i-col>
          <i-col span="7">
            <div class="search-select common-input">
              <span class="prepend">状态</span>
              <div class="common-input-flex">
                <i-select v-model="search.status">
                  <i-option v-for="item in search.billingStatus" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
              </div>
            </div>
          </i-col>
          <i-col span="3" class="fr tar">
            <a class="ivu-icon ivu-icon-ios-search search-btn2" @click="searchBtn">查询</a>
          </i-col>
        </Row>
      </div>
      <div class="page-content">
        <h2 class="table-total">您当前共有<span>{{tableDataRecords}}</span>项订单信息</h2>
        <i-table :columns="tableColumn" :data="tableData" ref="selection" stripe></i-table>
        <div style="margin: 10px;overflow: hidden">
          <div class="tac">
            <Page :total="tableDataRecords" :current.sync="pageIndex" :page-size="5" @on-change="changePage"></Page>
          </div>
        </div>
      </div>

      <Modal v-model="modal2" width="360">
          <p slot="header" style="color:#f60;text-align:center">
              <Icon type="ios-information-circle"></Icon>
              <span>Delete confirmation</span>
          </p>
          <div style="text-align:center">
              <p>After this task is deleted, the downstream 10 tasks will not be implemented.</p>
              <p>Will you delete it?</p>
          </div>
          <div slot="footer">
              <i-button type="error" size="large" long :loading="modal_loading" @click="del">Delete</i-button>
          </div>
      </Modal>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        hideSearch: true,
        search: {
          orderNumber: '',
          sender: '',
          startDate: '',
          endDate: '',
          status: '',
          billingStatus: [{
              value: '有效',
              label: '有效'
            },
            {
              value: '作废',
              label: '作废'
            },
            {
              value: '停用',
              label: '停用'
            }
          ],
        },
        tableColumn: [{
            type: 'selection',
            width: 40,
            align: 'right'
          },
          {
            // type: 'index',
            title: '序号',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('span',
                (appLayout.pageIndex - 1) * 5 + (params.index + 1)
              )
            }
          },
          {
            title: '公司名称',
            key: 'sender',
            align: 'center'
          },
          {
            title: '联系人',
            key: 'orderNumber',
            width: 130,
            align: 'center'
          },
          {
            title: '联系电话',
            key: 'tel',
            align: 'center'
          },
          {
            title: '会员类型',
            key: 'tel',
            width: 100,
            align: 'center'
          },
          {
            title: '地区',
            key: 'billingDate',
            width: 90,
            align: 'center'
          },
          {
            title: '覆盖区域',
            key: 'pieces',
            width: 80,
            align: 'center'
          },
          {
            title: '绑定时间',
            key: 'coldChain',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', {
                    class: params.row.coldChain == "是" ? "font-gray" : "font-orange"
                  },
                  params.row.coldChain
                )
              ]);
            }
          },
          {
            title: '解除绑定时间',
            key: 'specialCar',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', {
                    class: params.row.specialCar == "是" ? "font-gray" : "font-orange"
                  },
                  params.row.specialCar
                )
              ]);
            }
          },
          {
            title: '状态',
            key: 'transfer',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', {
                    class: params.row.transfer == "是" ? "font-gray" : "font-orange"
                  },
                  params.row.transfer
                )
              ]);
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  }
                }, '解除绑定'),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {

                    }
                  }
                }, '编辑'),
              ]);
            }
          }
        ],
        tableDataRecords: 0,
        tableData: [],
        pageIndex: 1,
        modal2: true,
        modal_loading: false,
      },
      mounted() {
        this.getTableData()
      },
      methods: {
        // 获取表格数据
        getTableData() {
          // 获取选中的数据
          // console.log(this.$refs.selection.getSelection())
          var self = this;
          self.tableData = [];
          axios.get('static/order.json').then(response => {
            this.tableData = response.data.Datas;
            this.tableDataRecords = response.data.TotalRecords;
          })

        },
        changePage(e) {
          this.pageIndex = e;
          this.getTableData();
        },
        searchBtn() {
          alert(0)
        },

        del () {
            this.modal_loading = true;
            setTimeout(() => {
                this.modal_loading = false;
                this.modal2 = false;
                this.$Message.success('Successfully delete');
            }, 2000);
        }
      }
    })
  </script>
</body>

</html>